<!-- 系统个人中心密码修改 -->
<template>
  <div>
    <el-dialog :title="$t('lan.changePwd')" :visible.sync="openModal" width="600px" v-loading="showLoading" :element-loading-text="$t('lan.dataLoading')" @close="$emit('update:open',false)" top="5vh">
      <el-form label-width="145px" :model="updateData" :rules="rules" ref="update">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.oldPwd')" prop="password">
              <el-input v-model="updateData.password" type="password" :placeholder="$t('lan.enterOldPwd')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.oldPwd')" prop="newPassword">
              <el-input v-model="updateData.newPassword" type="password" :placeholder="$t('lan.enterNewPwd')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.confirmPwd')" prop="confirmPassword">
              <el-input v-model="updateData.confirmPassword" type="password" :placeholder="$t('lan.enterConfirmPwd')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="updatePassword">{{$t('lan.submit')}}</el-button>
        <el-button size="medium" @click="$emit('update:open',false)">{{$t('lan.cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["open"],
  data () {
    const confirmPassword = (rule, value, callback) => {
      console.log(value)
      if (value == '') {
        callback(new Error(this.$t('lan.confirmPwdEmpty')));
      } else if (value != this.updateData.newPassword) {
        console.log(value);
        console.log(this.updateData.newPassword);
        callback(new Error(this.$t('lan.inconsistent')));
      } else {
        callback();
      }
    }
    return {
      openModal: false,
      updateData: {
        password: '',//旧密码
        newPassword: '',//新密码
        confirmPassword: '',
      },
      showLoading: false,
      rules: {
        password: [
          { required: true, message: this.$t('lan.pleaseOldPwd'), trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: this.$t('lan.pleaseNewPwd'), trigger: 'blur' },
          { required: true, min: 6, max: 15, message: this.$t('lan.PwdLength'), trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, validator: confirmPassword, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    updatePassword () {
      this.$refs['update'].validate(async (valid) => {
        if (valid) {
          this.showLoading = true
          let url = '/user/modifyPwd'
          let body = {
            password: this.updateData.password,
            newPassword: this.updateData.newPassword,
          }
          let result = await this.request.httpRequest('PUT', url, body)
          if (result.code == 200) {
            this.showLoading = false
            this.$alert(this.$t('lan.pwdSuccess'), this.$t('lan.prompt'), {
              confirmButtonText: this.$t('lan.reLogin'),
              type: 'warning ',
              callback: async () => {
                sessionStorage.clear()
                this.$router.push('/')
              }
            });
          } else {
            this.showLoading = false
            this.$message({ type: 'error', message: result.msg })
          }
        }
      });
    }
  },
  mounted () {
    this.openModal = this.open;
  }
};
</script>